<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>

</style>
<body>
    <div id="app">
      <input type="text" v-model="firstName">
      <p>姓：{{firstName}}</p>

      <input type="text" v-model="lastName">
      <p>名字：{{lastName}}</p>
      <p>全名：{{fullName}}</p>
      <input type="text" v-model="fullName">
    </div>

    <script src="./base/vue.js"></script>
    <script>
      //计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。
      var vm = new Vue({
        el:"#app",
        data: {
          firstName:"李",
          lastName:"狗蛋",
          fullName:""
        },
        computed:{
          // fullName(){
          //   return this.firstName + this.lastName
          // }
          fullName:{ //计算属性不仅可以获取值，而且可以设置内容
            get(){
              return this.firstName + this.lastName
            },
            set(val){
              this.firstName = val.substring(0,1) //截取第一个长度为姓
              this.lastName = val.substring(1)  //截取1后面的所有长度为名字
            }
          }
        }
      })

 
    </script>
</body>
</html>